<template>
  <div class="vue-box">
    <div class="c-panel">
		<el-row>
			<el-col :span="24" :xs="24">
				<!--模糊查询-->
				<el-form :inline="true" size="small">
					<el-form-item label="原文件名：">
						<el-input type="text" size="small" v-model="query.originalName" placeholder="模糊查询"></el-input>
					</el-form-item>
					<el-form-item label="上传日期：">
						<el-date-picker type="date" size="small" v-model="query.startTime" value-format="yyyy-MM-dd" placeholder="开始日期"></el-date-picker> - 
						<el-date-picker type="date" size="small" v-model="query.endTime" value-format="yyyy-MM-dd" placeholder="结束日期"></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="f5()">查询</el-button>
						<el-button type="info" plain size="small" icon="el-icon-refresh" @click="query.pageNo = 1; f5('')">重置</el-button>
					</el-form-item>
				</el-form>
				<!--全局功能按钮-->
				<el-row :gutter="5">
					<el-col :span="1.5" class="btn">
						<el-button type="warning" plain size="small" icon="el-icon-upload2" @click="upload">上传</el-button>
					</el-col>
					<el-col :span="1.5" class="btn">
						<el-button type="warning" plain size="small" icon="el-icon-upload" @click="batchUpload">批量上传</el-button>
					</el-col>
					<el-col :span="1.5" >
						<el-button type="danger" plain size="small" icon="el-icon-delete" @click="state.delDialogVisible=true">删除</el-button>
					</el-col>
					<el-col :span="1.5" class="btn">
						<el-button type="primary" plain size="small" icon="el-icon-refresh-left" @click="toggleSelection()">取消选择</el-button>
					</el-col>
					<div style="text-align:right;margin-right:5px"><!--因为按钮有样式偏移，这里的span不能设置为18，要比18小-->
						<span class="span-box">
							<el-tooltip style="diaplay:inline" effect="dark" content="附件类型标签快速选择，只会对类型进行筛选" placement="top">
								<i class="el-icon-question" />
							</el-tooltip>
						</span>
						<el-radio-group v-model="typeRadio" size="small" @input="typeSelect">
							<!--不想给定默认值，但是不给报错，就整个不展示的选项-->
							<el-radio-button v-if="false" label=""></el-radio-button>
							<el-radio-button label="在线聊天">在线聊天</el-radio-button>
							<el-radio-button label="附件上传">附件上传</el-radio-button>
							<el-radio-button label="用户头像">用户头像</el-radio-button>
						</el-radio-group>
					</div>
				</el-row>
				<!--数据列表-->
				<el-table :data="tableData" ref="multipleTable" style="width: 100%" v-loading="state.loading" 
						@selection-change="handleSelectionChange" size="medium">
					<el-table-column type="selection" width="30"></el-table-column>
					<el-table-column label="编号" align="center" type="index" width="80"></el-table-column>
					<el-table-column label="原始文件名" align="center" prop="originalName" width="350"></el-table-column>
					<el-table-column label="文件后缀" align="center" prop="fileType" width="100">
						<template slot-scope="scope">
							<el-tag
							disable-transitions>{{scope.row.fileType}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="文件大小" align="center" prop="fileSize" width="110"></el-table-column>
					<el-table-column label="文件类型" align="center" prop="type" width="140">
						<template slot-scope="scope">
							<el-tag
							disable-transitions>{{scope.row.type}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="上传时间" align="center" prop="createTime" width="150"></el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="s">
								<el-button v-if="s.row.isShow" type="primary" size="mini" @click="sa.showImage(zm.handleImgPath(s.row.urlPath))">
									<i class="el-icon-view el-icon--left"></i>预览</el-button>
								<el-popconfirm class="popConfirm" title="确定删除该附件吗？" @confirm="info=s.row,del()">
									<el-button type="danger" slot="reference" size="mini" >
										<i class="el-icon-delete el-icon--left"></i>删除</el-button>
								</el-popconfirm>
								<el-button type="success" size="mini" @click="info=s.row,download()">
									<i class="el-icon-download el-icon--left"></i>下载</el-button>
								
						</template>
					</el-table-column>
				</el-table>
				<!--对话框相关-->
				<el-dialog title="删除提示" :visible.sync="state.delDialogVisible" :modal-append-to-body='false' 
				width="30%" :before-close="handleClose">
						<span >确定删除选中的附件？</span>
						<span slot="footer" class="dialog-footer">
						<el-button type="primary" @click="del('batch')">确 定</el-button>
						<el-button @click="state.delDialogVisible=false">取 消</el-button>
						</span>
				</el-dialog>
				<!-- 分页 -->
				<div class="page-box">
					<el-pagination background
						layout="total, prev, pager, next, sizes, jumper" 
						:current-page.sync="query.pageNo" 
						:page-size.sync="query.pageSize" 
						:total="dataCount" 
						:page-sizes="[1, 5, 10, 20, 30, 100]" 
						@current-change="f5()" 
						@size-change="f5()">
					</el-pagination>
				</div>
			</el-col>
		</el-row>
	</div>
  </div>
</template>

<script>
import sa403 from '../error/sa-403.vue';	// 组件 403
let PATH='/api/attachment'
  export default {
    data() {
      return {
		    //查询参数
        query:{
          originalName:'',
          startTime: '',
		      endTime: '',
          pageNo:1,
          pageSize:10
        },
		//列表数据
        tableData: [],
		info:'',//当前操作数据
		dataCount:0,//数据总数
		multipleSelection:[],//选中数据
		typeRadio:'',
		state:{
			loading:false,
			delDialogVisible:false,
			getDialogVisible:false
		}
      }
    },
    methods: {
		//列表刷新
		f5(param){
			this.state.loading=true;
			let params=param===undefined?this.query:param;
			//console.log(params);
      this.request(PATH+'/list',params).then(res=>{
        if(!res){return}
        this.dataCount=res.data.total
        this.tableData=res.data.records
        if(params===''){
          this.query={pageNo:1,pageSize:10}
        }
        this.state.loading=false;
      })
		},
		//删除
		del(type){
      this.state.loading=true;
			let params=[];
			if(type=='batch'){
				params=this.multipleSelection;
			}else{
				params.push(this.info)
			}
			console.log(params);
      this.requestJson(PATH+'/del',params,{'Content-Type': 'application/json'}).then(res=>{
        if(!res){return}
        this.state.delDialogVisible=false
        this.$message.success("删除成功")
        this.f5()
      })
      this.state.loading=false;
		},
		//文件上传
		upload(){
			this.zm.uploadFunc(PATH+'/upload',(res)=>{
				console.log(res);
				if(res.code=='200'){
					this.$message.success(res.msg)
					this.f5()
				}else if(res.code=='100'){
					this.$message.warning("文件最大不能超过100mb！")
				}else if(res.code=='403'){
					this.$message.error('抱歉，您暂无<文件上传>权限')
				}else{
					this.$message.error(res.msg)
				}
			})
		},
		//批量文件上传
		batchUpload(){
			this.zm.batchUpload(PATH+'/upload',(res)=>{
				console.log(res);
				if(res.code=='200'){
					this.$message.success(res.msg)
					this.f5()
				}else if(res.code=='100'){
					this.$message.warning("文件最大不能超过100mb！")
				}else if(res.code=='403'){
					this.$message.error('抱歉，您暂无<批量文件上传>权限')
				}else{
					this.$message.error(res.msg)
				}
			})
		},
		//文件下载
		download(){
			if(!this.zm.checkAuth('attachment:download')){
				this.$message.error("抱歉，您暂无<文件下载>权限");
				return
			}
			this.zm.download(PATH+'/download',{id:this.info.id})
		},
		//类型筛选
		typeSelect(){
			let params={type:this.typeRadio}
			this.f5(params)
		},
		//取消当前的选择
		toggleSelection(rows) {
			if (rows) {
			rows.forEach(row => {
				this.$refs.multipleTable.toggleRowSelection(row);
			});
			} else {
			this.$refs.multipleTable.clearSelection();
			}
		},
		//选择事件
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		//对话框取消
		handleClose(done) {
			done();
		}
	},
	mounted(){
		this.f5()
	}
  }
</script>

<style scoped>
/**模糊查询字体样式 */
/deep/.c-panel .el-form-item__label, .c-panel .c-label {
	font-size:14px;
	font-weight:900
}
/*表格样式 */
/deep/ .el-table th.el-table__cell {
  background-color: aliceblue;
}
/*模糊搜索表单右移5px，对齐全局按钮和数据table*/
/deep/.c-panel .el-form{
	margin-left:-15px
}
/*按钮与表格的对齐间距等等 */
.btn{
  margin-bottom: 5px;
}

/**使用popconfirm弹框后按钮左右间距样式丢失，此处是补充 */
.popConfirm{
	margin-left:10px;
	margin-right: 10px;
}


</style>